<template>
    <ul class="project-container" v-loading="loading" ref="container">
        <li class="project-item" v-for="item in data" :key="item.i">
            <a :href="item.url" target="_blank" class="thumb">
                <img v-lazy="item.thumb" alt="" />
            </a>
            <div class="content">
                <h2>
                    <a :href="item.url" target="_blank">
                        {{ item.name }}
                    </a>
                </h2>
                <p v-for="(desc, i) in item.description" :key="i">{{ desc }}</p>
            </div>
        </li>
    </ul>
</template>

<script>
import { mapState } from "vuex"
import { back_top } from "@/mixins"

export default {
    created() {
        this.$store.dispatch("project/get_data")
    },
    mixins: [back_top()],
    computed: mapState("project", ["data", "loading"])
}
</script>

<style lang="less">
.project-container {
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    scroll-behavior: smooth;
    padding: 0 20px;
    box-sizing: border-box;
    background-color: #eee;
    .project-item {
        display: flex;
        margin: 15px 0;
        padding: 10px 18px;
        box-sizing: border-box;
        border: 2px solid #aaa;
        border-radius: 20px;
        transition: 0.3s;
        &:hover {
            transform: translateY(-5px);
            box-shadow: 0 3px 2px #555, 0 3px 4px #555, 0 3px 6px #555;
            background-color: #fff;
        }
        .thumb {
            width: 150px;
            height: 150px;
            margin-right: 25px;
            img {
                width: 100%;
                height: 100%;
                object-fit: contain;
            }
        }
        .content{
            h2 {
                text-align: left;
            }
            p {
                text-align: left;
            }
        }
    }
}
</style>
